<div id="ApplicationAdmin">
    <app-zone header="{{ 'application_rename_title' | translate }}">
        <app-zone-content class="bottom">
            <form class="ui form" #applicationUpdateFrom="ngForm">
                <div class="fields">
                    <div class="eight wide field">
                        <input type="text" name="formApplicationUpdateName" [(ngModel)]="newName" required #formApplicationUpdateName="ngModel"
                               pattern="[a-zA-Z0-9._-]*"
                               [disabled]="loading">
                        <div *ngIf="formApplicationUpdateName.invalid && !formApplicationUpdateName.pristine"
                             class="ui error message">
                            <p>{{'application_update_name_error' | translate}}</p>
                        </div>
                    </div>
                    <div class="eight wide right aligned field">
                        <button class="ui green button" [class.loading]="loading" name="updateNameButton" (click)="onSubmitApplicationUpdate()" [disabled]="applicationUpdateFrom.invalid || application.from_repository">{{ 'btn_rename' | translate }}
                        </button>
                        <app-warning-modal [title]="_translate.instant('warning_modal_title')" [msg]="_translate.instant('warning_modal_body')" (event)="onSubmitApplicationUpdate(true)" #updateWarning></app-warning-modal>
                    </div>
                </div>
            </form>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'application_description' | translate }}">
        <app-zone-content class="bottom">
            <form class="ui form" #applicationUpdateForm="ngForm">
                <div class="fields">
                    <div class="fourteen wide field">
                        <textarea class="app-description" type="text" name="formApplicationUpdateDescription" [(ngModel)]="application.description" required #formApplicationUpdateDescription="ngModel"
                               [disabled]="loading">
                        </textarea>
                    </div>
                    <div class="two wide right aligned field">
                        <button class="ui green button" [class.loading]="loading" name="updateDescriptionButton" (click)="onSubmitApplicationUpdate()" [disabled]="loading || application.from_repository">{{ 'btn_save' | translate }}
                        </button>
                    </div>
                </div>
            </form>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'application_icon' | translate }}">
        <app-zone-content class="bottom">
            <form class="ui form" #applicationUpdateForm="ngForm">
                <div class="fields">
                    <div class="fourteen wide field center aligned" *ngIf="!fileTooLarge">
                        <div>
                            <img class="app-icon" [src]="application.icon" alt="application icon" *ngIf="application.icon">
                        </div>
                        <app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)">
                        </app-upload-button>
                    </div>
                    <div class="ui fourteen wide red message field center aligned" *ngIf="fileTooLarge" [textContent]="'common_file_too_large' | translate"></div>
                    <div class="two wide right aligned field">
                        <button class="ui green button" [class.loading]="loading" name="updateDescriptionButton" (click)="onSubmitApplicationUpdate()" [disabled]="loading || application.from_repository">{{ 'btn_save' | translate }}
                        </button>
                    </div>
                </div>
            </form>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'application_repo_title' | translate }}">
        <app-zone-content class="bottom">
            <app-application-repo [project]="project" [application]="application"></app-application-repo>
        </app-zone-content>
    </app-zone>
    <ng-container *ngIf="project.integrations && project.integrations.length > 0">
        <app-zone header="{{ 'application_deployment_title' | translate }}">
            <app-zone-content class="bottom">
                <app-application-deployment [project]="project" [application]="application"></app-application-deployment>
            </app-zone-content>
        </app-zone>
    </ng-container>
    <app-zone header="{{ 'danger_zone' | translate }}" headerClass="red inverted">
        <app-zone-content class="bottom">
            <div class="ui grid">
                <div class="eight wide column">
                    <div class="title">{{ 'application_delete_label' | translate}}</div>
                    <div class="description">{{ 'application_delete_description' | translate}}</div>
                </div>
                <div class="eight wide right aligned column">
                    <app-delete-button [loading]="loading" (event)="deleteApplication()"></app-delete-button>
                </div>
            </div>
        </app-zone-content>
    </app-zone>
</div>
